<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>服务预约</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/style.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css"/>
    
    <script type="text/javascript" src="__FONT__/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="__FONT__/js/TouchSlide.1.1.js"></script>
    <script type="text/javascript">
	$(function(){
		$(".pro_bottom").click(function(){
			var thisNext = $(this).next();
			var imgShow = $(this).children('img')
			thisNext.slideToggle(); 
			var ahiden = $(this).parent().siblings().children('div.fugaiceng');
			if(ahiden.is(":hidden")){
				$(this).parent().siblings().children('div.fugaiceng').slideUp();
				 thisNext.parent().siblings().children().children('img').removeClass('uplow');
			  }
		    if(imgShow.hasClass('uplow')){
				imgShow.removeClass('uplow');
			}else{
				imgShow.addClass('uplow');
			}
      	});
		
		TouchSlide({
			slideCell:"#focus",
			titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
			mainCell:".bd ul", 
			effect:"left", 
			autoPlay:true,//自动播放
			autoPage:true, //自动分页
			switchLoad:"_src" //切换加载，真实图片路径为"_src" 
		});
	});
    </script>
</head>
<body style="background:#f7f7f9;">
	<header class="beauty_detail_head">
		<div id="focus" class="focus">
	      	<if condition="$item['tag']">
             <div class="zhekou {$item.tag_bg}">
               <p>{$item.tag}</p>
             </div>
            </if>
			<div class="hd">
				<ul><li class="">1</li><li class="">2</li><li class="on">3</li></ul>
			</div>
			<div class="bd">
				<div class="tempWrap" style="overflow:hidden; position:relative;">
					<ul style="width: 1119px; position: relative; overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms; transform: translate(-746px, 0px) translateZ(0px); display: none;">
						<foreach name="covers" item="cover">
						<li><a href="#"><img src="__UPLOADS__/Service/Carousel/{$cover.upload_number}/{$cover.img_name}" /></a></li>
						</foreach>
					</ul>
				</div>
			</div>
		</div>
	    <div class="bannerbot clear">
	        <dd>
	            <h2>{$item.service_name}</h2>
	            <strong>{$item.effect}</strong>
	        </dd>
	        <span class="priceA">￥{$item.price}</span>
	    </div>
	    <div class="selftj clear">
	       <ul>
	          <li>预约量：<span>{$item.purchases_total}</span></li>
	          <li>时间：<span>{$item.service_time}分钟</span></li>
	          <li>原价：<span>￥{$item.original_price}</span></li>
	       </ul>
	    </div>
	</header>
	<section class="">
		<input type="hidden" id="serviceTime" name="serviceTime" value="{$item.service_time}">
		<form action="{:U('/Order/orderConfirm')}" method="post">
			<input type="hidden" name="service_id" value="{$item.id}">
	     	<div class="introduction">
	       		<h2>项目介绍</h2>
	       		<p>{$item.service_desc}</p>
	     	</div>
	     	
	     	<div class="introduction main addhacksev">
	       		<h2>服务流程</h2>
	       		<div class="service">
			       	<foreach name="steps" item="step" key="key">
			          	<dd>
			             	<span>{++$key}.{$step.title}</span>
			             	<label>{$step.content}</label>
			          	</dd>
			        </foreach>
	       		</div>
	     	</div>
	     
			<div class="introduction product">
			  	<h2>项目产品</h2>
			  	<div class="picshow clear">
			    	<ul>
					    <foreach name="products" item="product">
					    <li>
					      	<img src="__UPLOADS__/Product/{$product.img_name}">
							<div class="pro_bottom">
							    <span>{$product.title}</span>
							    <img src="__FONT__/images/beautycare_010.png">
							</div>
					      	<div class="fugaiceng">
						      	<foreach name="product['effects']" item="effect">
						        	<span><i>·</i>{$effect.content}</span>
						        </foreach>
					      	</div>
					    </li>
					    </foreach>
			    	</ul>
			  	</div>
			</div>
	     
	     	<div class="introduction explain">
	       		<h2>项目说明</h2>
	       		<dd>
	           		<span>适用人群：</span>
	           		<label>{$item.people_use}</label>
	       		</dd>
	       		<dd>
	           		<span>注意事项：</span>
	           		<label>{$item.note}</label>
	       		</dd>
	     	</div>
	     	
	     	<div class="introduction order">
	       		<h2>预约服务</h2>
				<div class="orderservise">
				   <ul>
				      <li>
				      	<input type="hidden" name="beauty_id" value="{$beauty.id}">
				         <h1><a class="reSelect" id="selectBeauty" href="{:U('/BeautyParlor/selectBeautyParlor/id/'.$item['id'].'/beauty_id/'.$beauty['id'])}">预约美容院<span>{$beauty.name}</span></a></h1>
				         <if condition="$beauty && !$isDefault">
				         <div class="ordermain btylistmain addradius clear">
				         	<h2><img src="__FONT__/images/btylist_01.jpg"></h2>
	                       	<dd>
	                         <h3><span>{$beauty.name}</span></h3>
	                         <h3><for start="0" end="$beauty['start']"><i></i></for><for start="0" end="5 - $beauty['start']"><i class="nodia"></i></for><label>{$beauty.service_total}人消费</label></h3>
	                         <h3 class="hacklocation"><span>{$beauty.address}</span><label class="distance" data-latitude="{$beauty.latitude}" data-longitude="{$beauty.longitude}"></label></h3>
	                       	</dd>
				         </div>
				         </if>
				      </li>
				      <li>
				      	<input type="hidden" name="beautician_id" value="{$beautician.id}">
				         <h1><a class="reSelect" id="selectBeautician" href="{:U('/Index/selectBeautician/id/'.$item['id'].'/beauty_id/'.$beauty['id'].'/beautician_id/'.$beautician['id'])}">预约美容师<span>{$beautician.name}</span></a></h1>
				         <if condition="$beautician && !$isDefault">
				         <div class="ordermain btylistmain womenmain clear">
				         	<h2><if condition="$beautician['profile_img']">
						       <img src="__UPLOADS__/Profile/{$beautician.profile_img}">
						       <else />
						       <img src="__FONT__/images/defaultProfile.png">
						       </if></h2>
	                       	<dd>
	                         <h3><span>{$beautician.name}</span></h3>
	                         <h3><for start="0" end="$beautician['start']"><i></i></for></h3>
	                         <h3><strong>服务次数：<b>{$beautician.service_total}</b></strong><strong>评论：<b>{$beautician.comment_total}</b></strong></h3>
	                       	</dd>
				         </div>
				         </if>
				      </li>
				      <li class="gettime">
				         <h1><a href='javascript:void(0);'>预约时间<span>选择时间</span></a></h1>
				      </li>
				   </ul>
				</div>
	     	</div>
	     
	     	<div class="ordertime"></div>  
	     	<div id="leftTabBox" class="timem">
		     	<div class="busy">
	               <p>美容师该时间段忙，请选择其他时间段</p>
	           </div>
	     		<h1>请设置预约时间</h1>
	       		<input type="hidden" name="order_time" id="orderTime" value="">
	         	<ul class="tab_ul_new">
		            <li class="on"><a href="javascript:;">今天<span id="localtime">{$today|date='n月j日',###}</span></a></li>
		            <li><a href="javascript:;">明天<span></span></a></li>
		            <li><a href="javascript:;">后天<span></span></a></li>
	         	</ul>
	         	<div class="mytab_box" id="today">
	           		<ul></ul>
	         	</div>
	         	<div class="mytab_box" style="display:none" id="tomorrow">
	          		<ul></ul>
	        	</div>
		        <div class="mytab_box"  style="display:none" id="afterTomorrow">
		            <ul></ul>
		        </div>
	        </div> 
	      	<a href="javascript:void(0);" class="btn beautydetailbtn">马上预约</a>
		</form>
	</section>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<include file="Public/share-js" />
<script type="text/javascript"> 
var orderTimes, time;
var service_time_config_start, service_time_config_end;
var pad = function(tbl) {
    return function(num, n){
        return (0 >= (n - ''+num.length)) ? num : (tbl[n] || (tbl[n] = Array(n + 1).join(0)))+num;
}    
}([]);
function busyer(){
	  $(".busy").removeClass('busydown');
	  $(".busy").addClass('busyup');
	}
function createTimeDom(wrap, data, start, end) {
	var html = '',
		dateObj = new Date();
		currentTime = Math.floor(dateObj.getTime()/1000),
		startTime = 0;
		
	var html = ''
	var dayEnd = parseInt(data.end);
	for (var j = parseInt(data.start); j <= dayEnd; ) {
		var hour = (new Date(j * 1000)).getHours() + ':00';
		html += '<li class="noorder" data-time="'+j+'"><a>'+hour+'</a></li>';
		j  += 3600;
	}
	
	$timeSelectObj = $(html);
	wrap.find('ul').append(html);
		
	var orderTimeArr = [];
	if (orderTimes) {
		$.map(orderTimes, function (value, index) {
			orderTimeArr.push(parseInt(index));
		});
	}
	
	var time = Math.floor(new Date().getTime()/1000);
	
	if (!$.isEmptyObject(data)) {
		if (!$.isEmptyObject(data.setting)) {
			var settings = data.setting;
			var serviceTime = parseInt($("#serviceTime").val());
			for (var i in settings) {
				if (settings.hasOwnProperty(i)) {
					var end = parseInt(settings [i].end) + 3600;
					for (var m = parseInt(settings [i].start); m < end; ) {
						
						var orderElme = wrap.find('ul').find('li[data-time="'+m+'"]');
						if (m > time) {
							if  ($.inArray(m, orderTimeArr) !== -1) {
								var serviceEnd = parseInt(orderTimes [m]);
								orderElme.removeClass('yesorder');
								orderElme.next().removeClass('yesorder').addClass('multiTime');
								if (serviceEnd - m > 3600) {
									var hideList = Math.ceil((serviceEnd - m)/3600);
									
									m += hideList * 3600;
									if (hideList - 2 <= 0) {
										orderElme.next().next().removeClass('yesorder').addClass('multiTime');
									} else {
										for (var n = 0; n < hideList; n++) {
											orderElme.nextAll().eq(n).removeClass('yesorder').addClass('multiTime');
										}
									}
								} else {
									m += 3600;
								}
							} else {
								if (!orderElme.hasClass('multiTime')) {
									orderElme.addClass('yesorder').removeClass('noorder');
								}
							}
						}
						m += 3600;
					}
				}
			}
		}
	}
	
	$(wrap).find("li.noorder").click(function(){
	  $(".busy").removeClass('busyup');
	  $(".busy").addClass('busydown');
	  
	  var txt = '美容师该时间段忙，请选择其他时间段';
	  $('.busy p').html(txt);
	  setTimeout('busyer();',2000)
	});	
	
	
	$(wrap).find("li.yesorder").click(function(){
		$(this).siblings().children('a').removeClass('active');
	    $(this).parent().parent().siblings().children().children().children('a').removeClass('active');
		
	    var selectTime = parseInt($(this).attr('data-time'));
		var next = $(this).next();
		var serviceTime = parseInt($("#serviceTime").val());
		
		if (serviceTime >= 60 && !next.hasClass('yesorder')) {
			$(".busy").removeClass('busyup');
		  	$(".busy").addClass('busydown');
		  
		  	var txt = '你预约的服务时长为' +serviceTime+'分钟,超出了该美容师的服务时间';
		  	$('.busy p').html(txt);
		  	setTimeout('busyer();',2000);
			return false;
		} else if (serviceTime >= 60){
			var count = Math.ceil(serviceTime/60), canOrder = true;
			if (count > 2) {
				$(".busy").removeClass('busyup');
			  	$(".busy").addClass('busydown');
			  
			  	$(this).nextAll().each(function (i, o) {
			  		if (i < count && !$(o).hasClass('yesorder')) {
			  			canOrder = false;
			  			var txt = '你预约的服务时长为' +serviceTime+'分钟,超出了该美容师的服务时间';
					  	$('.busy p').html(txt);
					  	setTimeout('busyer();',2000);
					  	return false;
			  		}
			  	});
			}
			
			if (!canOrder) {
				return false;
			}
		}
		
		$(this).children('a').addClass('active');
		var time = parseInt($(this).attr('data-time'));
		
		objD = new Date(time * 1000);
		var str;  
	    var MM = objD.getMonth()+1;  
	    if(MM<10) MM = '0' + MM;  
	    var dd = objD.getDate();  
	    if(dd<10) dd = '0' + dd;  
		
	    yue = MM + "月" + dd + "日";
	    shijian = objD.getHours() +':' +pad(objD.getMinutes(),1);

	    $(".orderservise .gettime h1 a span").html(yue+' '+shijian);
		
		localStorage.setItem('beautician_id', $('input[name="beautician_id"]').val());
		localStorage.setItem('selectTime', $(this).attr('data-time'));
		
		$("#orderTime").val($(this).attr('data-time'));
		$(".ordertime").fadeOut('slow');
		$(".timem").addClass('timemup').removeClass('timemdown');
		
		$('html, body').animate({scrollTop: $('body').height()}, 0);
	});
}

function buildTimeSelect(data) {
	var Today = data.today;
	var Tomorrow = data.tomorrow;
	var afterTomorrow = data.afterTomorrow;
	
	$timestamp = 24 * 3600;
	createTimeDom($('#today'), Today, service_time_config_start, service_time_config_end);
	createTimeDom($('#tomorrow'), Tomorrow, service_time_config_start + $timestamp,  service_time_config_end + $timestamp);
	createTimeDom($('#afterTomorrow'), afterTomorrow, service_time_config_start + 2 * $timestamp, service_time_config_end + 2 * $timestamp);
	
	var tomorrowDate = new Date((service_time_config_start + $timestamp) * 1000);
	var afterTomorrowDate = new Date((service_time_config_start + 2 * $timestamp) * 1000);
	var tomorrowMonth = tomorrowDate.getMonth();
	var afterTomorrowMonth = afterTomorrowDate.getMonth();
	
	$('.tab_ul_new li').eq(1).find('span').empty().append(++tomorrowMonth+'月'+tomorrowDate.getDate()+'日');
	$('.tab_ul_new li').eq(2).find('span').empty().append(++afterTomorrowMonth+'月'+afterTomorrowDate.getDate()+'日');
}

var hasLoadTime = false;
$(function () {
	var LIlies = $(".picshow li").length; 
	var ulWidth = LIlies*162;
	
	var beauticianTime;
	function getBeauticianServiceTime() {
		if (beauticianTime && beauticianTime.state() == "pending") {
			return false;
		}
		
		var beautician_id = $('input[name="beautician_id"]').val();
		if ($.trim(beautician_id) == '') {
			alert('请选择美容师');
			return false;
		}
		
		beauticianTime = $.ajax({
			url: '{:U("/Index/getTime")}',
			data: {beautician_id: beautician_id},
			dataType: 'json',
			success: function (result) {
				if (result.status == 1) {
					hasLoadTime = true;
					
					time = result.data.time;
					orderTimes = result.data.orderTimes;
					
					service_time_config_start = time.config_start;
					service_time_config_end = time.config_end;
					buildTimeSelect(time);
					
					$(".ordertime").fadeIn('fast');
					$(".timem").addClass('timemdown').removeClass('timemup');
				}
			},
			error: function () {
				
			}
		});
	}
	
	$(".gettime").click(function(){
		if (!hasLoadTime) {
			getBeauticianServiceTime();
		} else {
			$(".ordertime").fadeIn('fast');
			$(".timem").addClass('timemdown').removeClass('timemup');
		}
	});
	
	$(".ordertime").click(function(){
		$(".ordertime").fadeOut('slow');
		$(".timem").addClass('timemup').removeClass('timemdown');
	});
	
	
	$(".picshow ul").css('width',ulWidth);
	var ddStep = $(".service dd").length;
	if(ddStep > 3){
		$(".service dd:nth-child(n+4)").hide();
		$(".service").append('<a class="btn step"><span>' + '更多步骤' + '</span></a>');
		$(".addhacksev").css('padding-bottom','0');
		
		$(".service a.step").click(function(){
			  $(".service a.step").each(function() {
				 // alert('11')
				if($(this).html() == '收起步骤'){
					$(this).html('更多步骤');
					$(".service dd:nth-child(n+4)").hide();
				  }else{
					   $(this).html('收起步骤');
					   $(".service dd:nth-child(n+4)").show();
					//  alert('22')
					  }
			  });
		 });
		//<a class="btn step"><span>更多步骤</span></a>
	}
	
	tab(".tab_ul_new li", ".mytab_box", 1)
	tab(".dsd li", ".mytab_box2", 1)
	tab(".dsds li", ".mytab_box2s", 1)
	
	$(".beautydetailbtn").click(function() {
		var form = $(this).parents('form').get(0);
		
		var selectTime = $('.yesorder .active');
		var beauty_id = $('input[name="beauty_id"]').val();
		var beautician_id = $('input[name="beautician_id"]').val();
		
		if ($.trim(beauty_id) == '') {
			alert('请选择美容院');
			return false;
		}
		
		if ($.trim(beautician_id) == '') {
			alert('请选择美容师');
			return false;
		}
		
		if (!selectTime.length) {
			if (!hasLoadTime) {
				getBeauticianServiceTime();
			} else {
				$(".ordertime").fadeIn('fast');
				$(".timem").addClass('timemdown').removeClass('timemup');
			}
			return false;
		}
		
		$(form).submit();
	});
});

function tab(a,b,c){
	if(c==1){
		$(a).click(function(){  
			var index = $(this).index();
			$(this).addClass("on").siblings().removeClass("on");
			
			$timestamp = 24 * 3600;
			var time = service_time_config_start + index * $timestamp;
			var d = new Date(time * 1000);
			
			updateDaySelect(d);
			
			$(b).hide();      
			$(b+":eq("+index+")").show();
		});
	} else {
		$(a).hover(function(){
			var index = $(this).index();
			$(this).addClass("on").siblings().removeClass("on");
			$(b).hide();    
			$(b+":eq("+index+")").show();
		});
	}        
}

function updateDaySelect(objD) {
    var str;  
    var MM = objD.getMonth()+1;  
    if(MM<10) MM = '0' + MM;  
    var dd = objD.getDate();  
    if(dd<10) dd = '0' + dd;  
    
    var weak = ['日', '一', '二', '三', '四', '五', '六'];
    var ww = objD.getDay();
    
    return(str);  
}
  
updateDaySelect(new Date());
</script>
<if condition="$scrollToBottom">
<script>
$('html, body').animate({scrollTop: $('body').height()}, 0);
</script>
</if>
<if condition="$beautician">
<script>
var currentSelect = '{$beautician.id}';
var prevSelectBeautician = localStorage.getItem('beautician_id');
if (currentSelect == prevSelectBeautician) {
	var selectTime = localStorage.getItem('selectTime');
	
	if (selectTime) {
		selectTime = parseInt(selectTime);
		
		if (isNaN(selectTime)) {
			objD = new Date(selectTime * 1000);
			var str;  
		    var MM = objD.getMonth()+1;  
		    if(MM<10) MM = '0' + MM;  
		    var dd = objD.getDate();  
		    if(dd<10) dd = '0' + dd;  
		    
		    var weak = ['日', '一', '二', '三', '四', '五', '六'];
		    var ww = objD.getDay();
		    
		    $(".gettime h3 span").html(MM + "月" + dd + "日" + '周' + weak[ww]);
		    
			$("#orderTime").val(selectTime);
		}
	}
} else {
	localStorage.setItem('beautician_id', currentSelect);
}
</script>
</if>
<script>isDefault = false;</script>
<if condition="$isDefault">
<script>isDefault = true;</script>
</if>
<script>
	function mathLocation() {
		$(".hacklocation label").each(function() {
			  var hWidth = $(".hacklocation").width();
			  var lWidth = $(this).width()+28;
			  var sWidth = hWidth-lWidth;
			  $(this).siblings().css('width',sWidth); 
	  }); 
	}

	function distance(start, end) {
		$.ajax({
			url: '{:U("/BeautyParlor/getUserToBeautyDistance")}',
			data: {start: start, end: end},
			dataType: 'json',
			success: function (result) {
				if (result.status == '1') {
					$('.distance').html(result.distance);
				} else {
					$('.distance').html(result.message);
				}
				mathLocation()
			}
		});
	}
	
	function showLocationInfo(pt, rs) {
		var addComp = rs.addressComponents;
		var start = {};
		if (pt.lat && pt.lng) {
			start ['latitude'] = pt.lat;
			start ['longitude'] = pt.lng;
		}
		
		var selectProvince = localStorage.getItem('select_province'),
	    	selectCity = localStorage.getItem('select_city'),
	    	ajaxLoadParams = {},
	    	currentProvince = addComp.province,
	    	currentCity = addComp.city;
	    
		var recommend = {};
	    if ($.trim(selectProvince) != '' && $.trim(selectCity) != '' && 
	    		currentProvince != selectProvince && currentCity != selectCity) {
	    	
	    	recommend.province = selectProvince;
	    	recommend.city = selectCity;
	    	
	    } else {
	    	if ($('.distance').attr('data-latitude')) {
	    		var end = {latitude: $('.distance').attr('data-latitude'), longitude: $('.distance').attr('data-longitude')};
				distance(start, end);
	    	}
	    	
	    	recommend.province = currentProvince;
	    	recommend.city = currentCity;
	    	recommend.lat = pt.lat;
	    	recommend.lng = pt.lng;
	    }
	    
	    if (isDefault) {
    		$.ajax({
    			url: '{:U("/ServiceItem/recommend")}',
    			data: recommend,
    			dataType: 'json',
    			success: function (result) {
    				if (result.status == 1) {
    					result.beauty
    					
    					$('[name="beauty_id"]').val(result.beauty.id);
    					
    					if (result.beauty) {
    						$('[name="beauty_id"]').val(result.beauty.id);
    						
    						var end = {latitude: result.beauty.latitude, longitude: result.beauty.longitude};
    						$('#selectBeauty').find('span').html(result.beauty.name);
    						$('#selectBeauty').attr('href', "{:U('/BeautyParlor/selectBeautyParlor/id/'.$item['id'])}?beauty_id="+result.beauty.id)
    						$('#selectBeautician').attr('href', "{:U('/Index/selectBeautician/id/'.$item['id'])}?beauty_id="+result.beauty.id);
    						if (result.beautician) {
        						$('[name="beautician_id"]').val(result.beautician.id);
        						$('#selectBeautician').attr('href', "{:U('/Index/selectBeautician/id/'.$item['id'])}?beauty_id="+result.beauty.id+"&beautician_id="+result.beautician.id);
        						$('#selectBeautician').find('span').html(result.beautician.name);
    						}
    					}
    				}
    			}
    		})
    	}
	}
</script>
</html>